<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp" %>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="微社区,Q生活" name="keywords"/>
<meta content="微社区,Q生活" name="description"/>
<title>微社区|Q生活</title>
<link rel="stylesheet" href="${ctx}/static/css/Master.css"/>
<script src="${ctx}/static/js/jquery-1.9.0.min.js"></script>

<link href="${ctx}/static/css/validation.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="${ctx}/static/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${ctx}/static/js/jquery.metadata.js"></script>
<script type="text/javascript" src="${ctx}/static/js/messages_cn.js"></script>

<script src="${ctx}/static/plugins/layer/layer.js"></script>
<%-- 基础js,所有页面都需要引入此js,依赖layer.js --%>
<script src="${ctx}/static/js/common/base.js"></script>
<script src="${ctx}/static/js/common/util.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#orgName").click(function(){
		openOrg();
	});
	$("#roleBtn").click(function(){
		openRole();
	});
	$("#groupBtn").click(function(){
		openGroup();
	});
	
	 jQuery.validator.addMethod("isMobile", function(value, element) {
	  var length = value.length;
	  var mobile = /^1\d{10}$/;
	  return this.optional(element) || (length == 11 && mobile.test(value));
	 }, "请填写正确的手机号码");
	 
	//异步验证手机号码是否重复
    jQuery.validator.addMethod("checkMobileExist", function(value, element){
        var result = false;
        var useId = $("#useId").val();
        if(!useId){
        	useId = 0;
        }
        // 设置同步
        $.ajaxSetup({
            async: false
        });
        $.get("${ctx}/user/"+useId+"/"+value+"/checkMobileExist", function(data){
        	if(typeof data == "string"){
        		if(data == "true"){
        			data = true;
        		}else{
        			data = false;
        		}
        	}
            result = !data;
            
        });
        // 恢复异步
        $.ajaxSetup({
            async: true
        });
        return result;
    }, "手机号码已存在");
	
});
function submit(){
	var form = $("#editForm");
	
	//增加对只读元素的验证, validate默认不会校验只读元素
	var children = form.find('input[readonly]');
	children.attr('readonly', false);
	if(!form.valid()){
		children.attr('readonly', true);
		return false;
	}

	$.ajax({    
	    //url:form.attr("action"),//可以不要   
	    data:form.serialize(),    
	    type:"post",    
	    cache:false,    
	    dataType:"json",
	    async:true, //默认为true 异步    
	    success:function(data) {    
	        top.layer.msg(data,{},function(){
	        	window.location="${ctx}/user/list";   
            });
	     } 
	});
}

//打开机构选择框
function openOrg(){
	//打开iframe层
	var index = parent.layer.open({
		title: '选择机构',
	    type: 2,
	    //offset:'30px',//垂直,水平
	    area: ['700px', '440px'],
	    fix: false, //不固定
	    maxmin: true,
	    content: '${ctx}/organization/1/orgSearch', //iframe的url,传入参数为1则只能选择单选，参数2多选
	    success: function(layero, index){
	        //ifram对象
	        var $iframe = $(layero.find('iframe')[0]);
	        //ifram页面内容实际高度
	        var height = $iframe.contents().height();
	        //为保证美观,定义最大高度
	        var maxHeight = 500;
	        if(height>maxHeight){
	        	height=maxHeight;
	        }
	        $iframe.height(height);
	        //让layer弹出框的高度变成设置后的高度,使拖拽、最大/小化不会变成原高度
	        parent.layer.iframeAuto(index);
	    }
	});
}

//打开角色选择框
function openRole(){
	//打开iframe层
	var index = parent.layer.open({
		title: '选择角色',
	    type: 2,
	    //offset:'30px',//垂直,水平
	    area: ['700px', '440px'],
	    fix: false, //不固定
	    maxmin: true,
	    content: '${ctx}/role/toListOpen',
	    success: function(layero, index){
	        //ifram对象
	        var $iframe = $(layero.find('iframe')[0]);
	        //ifram页面内容实际高度
	        var height = $iframe.contents().height();
	        //为保证美观,定义最大高度
	        var maxHeight = 500;
	        if(height>maxHeight){
	        	height=maxHeight;
	        }
	        $iframe.height(height);
	        //让layer弹出框的高度变成设置后的高度,使拖拽、最大/小化不会变成原高度
	        parent.layer.iframeAuto(index);
	    }
	});
}

//打开群组选择框
function openGroup(){
	//打开iframe层
	var index = parent.layer.open({
		title: '选择群组',
	    type: 2,
	    //offset:'30px',//垂直,水平
	    area: ['700px', '440px'],
	    fix: false, //不固定
	    maxmin: true,
	    content: '${ctx}/group/toListOpen',
	    success: function(layero, index){
	        //ifram对象
	        var $iframe = $(layero.find('iframe')[0]);
	        //ifram页面内容实际高度
	        var height = $iframe.contents().height();
	        //为保证美观,定义最大高度
	        var maxHeight = 500;
	        if(height>maxHeight){
	        	height=maxHeight;
	        }
	        $iframe.height(height);
	        //让layer弹出框的高度变成设置后的高度,使拖拽、最大/小化不会变成原高度
	        parent.layer.iframeAuto(index);
	    }
	});
}
</script>
</head>

<body>
<section class="boxRight">
<form:form id="editForm" method="post" commandName="user">
<form:hidden path="useId"/>
	<div class="OrgTit">${op }</div>
	<div class="context">
		<div class="add_firstmenu">
			<dl>
				<dt>
					<span class="im">*</span>手机号码
				</dt>
				<dd>
					<form:input class="w1 required isMobile checkMobileExist" maxlength="11" path="useMobilePhone"/>
				</dd>
			</dl>
			<dl>
				<dt>
					<span class="im">*</span>真实姓名
				</dt>
				<dd>
					<form:input class="w1 required" maxlength="10" path="useRealName"/>
				</dd>
			</dl>
			<dl>
				<dt>备注</dt>
				<dd>
					<div class="textareaBox">
						<form:textarea path="useDesc" maxlength="200" style="height: 40px;"/>
					</div>
				</dd>
			</dl>
			<dl>
				<dt>
					<span class="im">*</span>机构归属
				</dt>
				<dd>
					<form:hidden path="orgId"/>
					<input id="orgName" type="text" class="w1 required" readonly="readonly" value="${user.org.orgName }"/>
				</dd>
			</dl>
			<dl>
				<dt>角色列表</dt>
				<dd>
					<div class="combtn">
		            <a id="roleBtn" href="javascript:void(0)">选择</a>
		            </div>
					<div class="textareaBox">
		            	<form:hidden path="rolIds"/>
			            <textarea id="rolNames" readonly="readonly" style="height: 60px;"><c:forEach items="${user.rolList}" var="role" varStatus="status">${role.rolName }${status.last?"":"，"}</c:forEach></textarea>
					</div>
				</dd>
			</dl>
			
			<dl>
				<dt>群组列表</dt>
				<dd>
					<div class="combtn">
		            <a id="groupBtn" href="javascript:void(0)">选择</a>
		            </div>
					<div class="textareaBox">
		            	<form:hidden path="groIds"/>
			            <textarea id="groNames" readonly="readonly" style="height: 60px;"><c:forEach items="${user.groList}" var="group" varStatus="status">${group.groName }${status.last?"":"，"}</c:forEach></textarea>
					</div>
				</dd>
			</dl>
			<div class="combtn"><a href="javascript:void(0);" onclick="submit()">确定</a><a href="javascript:void(0);" onclick="history.back();">返回</a></div>
		</div>
	</div>
</form:form>
</section>
</body>
</html>
